<template>
  <section class="todoapp">
    <hm-header @dealadd="dealadd"></hm-header>
    <hm-main 
    :list="showlist"
    @dealselect="dealselect" 
    @remove="remove"
    @dealcheck="dealcheck"></hm-main>
    <hm-footer :list="list" @del="del" :status="status" 
    v-show="this.list.length"
    @dealdone="dealdone"></hm-footer>
  </section>
</template>

<script>
const obj={
  '#/completed':'done',
  '#/':'all',
  '#/active':'undone'
}
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter
  },
  data(){
    return{
      list:JSON.parse(localStorage.getItem('list'))||[],
      status:obj[location.hash]||'all'
    }
  },
  watch:{
    list:{
      deep:true,
      handler(val){
      localStorage.setItem('list',JSON.stringify(val))
      }
    }
  },
  methods:{
    dealselect(id){
      this.list.find(item=>item.id===id).done=!this.list.find(item=>item.id===id).done
    },
    remove(id){
      this.list.splice(this.list.findIndex(item=>item.id===id),1)
    },
    dealadd(name){
      const id=this.list.length?this.list.slice(-1)[0].id+1:1
      this.list.push({
        id,
        name,
        done:false
      })
    },
    dealcheck(done){
      this.list.forEach(item=>item.done=done)
    },
    del(){
      this.list=this.list.filter(item=>item.done===false)
    },
    dealdone(status){
      this.status=status
    }
  },
  computed:{
    showlist(){
      if(this.status==='all'){
        return this.list
      }else if(this.status==='undone'){
        return this.list.filter(item=>item.done===false)
      }else{
        return this.list.filter(item=>item.done===true)
      }
    }
  }
}
</script>

<style></style>
